<h1>Add new group:</h1><hr />
<form [formGroup]="addForm" (ngSubmit)="saveGroup()" novalidate>
  <div class="row">
    <div class="col-md-6">
      <div class="form-group row">
        <label class="col-sm-2 col-form-label">Name: <span class="required">*</span></label>
        <div class="col-sm-10">
          <input type="text" formControlName="name" class="form-control" placeholder="Name"
                 [ngClass]="{ 'is-valid': name.valid && (name.dirty || name.touched),
                 'is-invalid': name.invalid && (name.dirty || name.touched)}" lowercase>
          <div *ngIf="name.invalid && (name.dirty || name.touched)"
               class="invalid-feedback">
            <div class="float-right" *ngIf="name.errors.required">
              Name is required
            </div>
            <div class="float-right" *ngIf="name.errors.groupExists">
              Group with this name already exists
            </div>
            <div class="clearfix"></div>
          </div>
        </div>
      </div>
      <div class="form-group row">
        <label class="col-sm-2 col-form-label">Label: </label>
        <div class="col-sm-10">
          <input type="text" formControlName="label" class="form-control" placeholder="Label"
                 [ngClass]="{ 'is-valid': label.valid && (label.dirty || label.touched),
                 'is-invalid': label.invalid && (label.dirty || label.touched)}">
          <div *ngIf="label.invalid && (label.dirty || label.touched)"
               class="invalid-feedback">
            <div class="float-right" *ngIf="label.errors.required">
              Label is required
            </div>
            <div class="clearfix"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="form-group row">
        <label class="col-sm-2 col-form-label">Rights: <span class="required">*</span></label>
        <div class="col-sm-10">
          <ng-select class="form-control" [ngClass]="{ 'is-valid': rights.valid && (rights.dirty || rights.touched),
                 'is-invalid': rights.invalid && (rights.dirty || rights.touched)}"
                     [items]="rightList"
                     [multiple]="true"
                     bindLabel="name"
                     [groupBy]="groupByFn"
                     [selectableGroup]="true"
                     [selectableGroupAsModel]="false"
                     [closeOnSelect]="false"
                     bindValue="name"
                     formControlName="rights">
            <ng-template ng-optgroup-tmp let-item="item">
              <span style="vertical-align: middle;">{{item.name}}</span>
              <span class="ml-1 badge badge-secondary">{{item.total}}</span>
            </ng-template>
          </ng-select>
        </div>
      </div>

    </div>
  </div>
  <hr/>
  <button type="submit" class="btn btn-primary">Submit</button>
  <button routerLink="/management/groups/" type="button" class="btn ml-2 btn-outline-danger">Cancel</button>
</form>
